<template>
<div class="material-main">

    <el-card class="material">
        <div slot="header">
            <el-button type="primary" @click="goAddMaterial">新增</el-button>

            <el-tooltip class="item"  style="float: right;" effect="dark" content="删除选中的列表" placement="top-start">
                <el-button  type="danger" icon="el-icon-delete" circle @click="delAll"></el-button>
            </el-tooltip>
        </div>

        <div>
            <el-table v-loading="loading" :element-loading-text="tips" :data="materialList" height="450" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="createTime" label="创建日期" width="180" sortable>
                </el-table-column>
                <el-table-column prop="modifyTime" label="修改日期" width="180" sortable>
                </el-table-column>
                <el-table-column prop="ossUrl" label="图片" width="160">
                    <template slot-scope="scope">
                        <img class="cover-img" :src="scope.row.ossUrl" alt="sorry">
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="140" class="btns">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="goDelMaterial(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器内容 -->
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.start" :page-sizes="page.sizes" :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
            </el-pagination>

            <!-- 查看显示的弹窗内容 -->
            <el-dialog title="素材管理" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
                <div class="mask-content">
                    <el-row :gutter="10">
                        <el-col :span="20">
                            <img :src="mask.ossUrl" alt="sorry">
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            创建时间：{{mask.createTime}}
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            修改时间： {{mask.modifyTime}}
                        </el-col>
                    </el-row>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
                </span>
            </el-dialog>

        </div>
    </el-card>

</div>
</template>

<script>
import {
    findMaterialByPage,
    delMaterial
} from '@/api/content/material'
export default {
    components: {

    },
    data() {
        return {
            // 分页器内容
            page: {
                limit: 10, //每一页数量
                sizes: [10, 20, 30, 40],
                totalCount: 40, //总页数
                start: 1 //当前页码
            },
            materialList: [],
            dialogVisible: false,
            mask: {},
            loading: false,
            tips: '别着急哈……☹',
            delList: []

        };
    },
    computed: {},
    created() {
        this.init()

    },
    mounted() {

    },
    methods: {
        init() {
            this.loading = true
            findMaterialByPage(this.page.start, this.page.limit).then(res => {
                console.log(res);
                if (res.success) {
                    this.materialList = res.data.rows
                    this.page.totalCount = res.data.total

                }
                // 关闭loading
                this.loading = false

            })
        },
        // 增加素材
        goAddMaterial() {
            this.$router.push({
                name: 'contentMaterialAdd'
            })

        },
        handleClick(item) {
            console.log(item);
            this.dialogVisible = true
            this.mask = item

        },
        handleSizeChange(val) {
            this.page.sizes = val;
            this.init()
        },
        handleCurrentChange(val) {
            this.page.start = val
            this.init()
        },
        // 关闭弹窗确认内容
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});

        },
        goDelMaterial(id) {
            // delMaterial(id).then(res=>{
            //     console.log(res);
            //     this.init()
            // })
            this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delMaterial(id).then(res => {
                    console.log(res)
                    if (res.success) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.init()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        delAll() {
            
            if(this.delList.length===0){
               this.$message.error('请选择要删除的素材！')
           }else{
                this.$confirm('确定删除所选素材吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.delList.forEach(el => {
                    delMaterial(el.id).then(res => {
                        console.log(res);
                        if (res.success) {
                            this.init()
                            this.$message.success('已成功删除所选文章')
                        }
                    })
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
           }

        },
        handleSelectionChange(val) {
            this.delList = val

        }

    },
};
</script>

<style lang="scss" scoped>
.material {
    margin: 30px;

    .cover-img {
        width: 140px;
        height: 140px;
        border-radius: 10px;
    }

    // 分页器
    .pagination {
        margin-top: 30px;
    }

    // 按钮
    .btns {
        background-color: #fff;
    }

    // 弹窗的内容
    .mask-content {
        font-size: 18px;

        img {
            width: 130px;
            height: 130px;
            border-radius: 10px;

        }

        .el-row {
            margin-top: 20px;
        }

    }
}
</style>
